<template>
    <div class="edit-user-container">

        <el-card class="edit-user-card">
            <h2>编辑个人信息</h2>
            <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
                <el-form-item label="头像">
                    <el-upload class="avatar-uploader" action="#" :show-file-list="false"
                        :before-upload="beforeAvatarUpload" :on-change="handleAvatarChange">
                        <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="简介" prop="description">
                    <el-input v-model="form.description" type="textarea" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="onCancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { commonAjax } from '@/util/request.js'

const router = useRouter()
const formRef = ref(null)
const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
const form = reactive({
    userid: userInfo.userid,
    avatarUrl: userInfo.avatarUrl,
    username: userInfo.username,
    description: userInfo.description,
    sex: userInfo.sex,
    email: userInfo.email
})
const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
}
function beforeAvatarUpload(file) {
    // 可加类型/大小校验
    return true
}
function handleAvatarChange(file) {
    // 这里假设直接用本地预览，实际应上传到服务器后返回url
    const reader = new FileReader()
    reader.onload = e => {
        form.avatarUrl = e.target.result
    }
    reader.readAsDataURL(file.raw)
}
function onSubmit() {
    formRef.value.validate(valid => {
        if (!valid) return
        commonAjax({
            url: `${Config.serverUrl}/user/update`,
            method: 'POST',
            data: { ...form }
        }).then(res => {
            if (res && res.code === 200) {
                localStorage.setItem('userInfo', JSON.stringify(form))
                ElMessage.success('修改成功')
                router.push('/home/user')
            } else {
                ElMessage.error(res.msg || '修改失败')
            }
        }).catch(() => {
            ElMessage.error('请求失败')
        })
    })
}
function onCancel() {
    router.push('/home/user')
}
</script>

<style scoped></style>